<template>
  <div class="m_top_bg">
    <div class="top">
      <div class="m_logo">
        <router-link to="/">
          <img :src="require('@/assets/images/logo1.png')" />
        </router-link>
      </div>
      <div class="m_search">
        <form @submit.prevent="handleSearch">
          <input 
            type="text" 
            v-model="searchKeyword" 
            class="m_ipt" 
          />
          <input type="submit" value="搜索" class="m_btn" />
        </form>                      
        <span class="fl">
          <a href="#" @click.prevent="searchFor('咖啡')">咖啡</a>
          <a href="#" @click.prevent="searchFor('iphone 6S')">iphone 6S</a>
          <a href="#" @click.prevent="searchFor('新鲜美食')">新鲜美食</a>
          <a href="#" @click.prevent="searchFor('蛋糕')">蛋糕</a>
          <a href="#" @click.prevent="searchFor('日用品')">日用品</a>
          <a href="#" @click.prevent="searchFor('连衣裙')">连衣裙</a>
        </span>
      </div>
      <div class="i_car">
        <div class="car_t" @click="toggleCart">购物车 [ <span>{{ cartCount }}</span> ]</div>
        <div class="car_bg" v-show="showCart">
          <!--Begin 购物车未登录 Begin-->
          <div class="un_login" v-if="!isLoggedIn">
            还未登录！<router-link to="/login" style="color:#ff4e00;">马上登录</router-link> 查看购物车！
          </div>
          <!--End 购物车未登录 End-->
          <!--Begin 购物车已登录 Begin-->
          <div v-else>
            <ul class="cars">
              <li>
                <div class="img">
                  <router-link to="#">
                    <img :src="require('@/assets/images/car1.jpg')" width="58" height="58" />
                  </router-link>
                </div>
                <div class="name">
                  <router-link to="#">法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只</router-link>
                </div>
                <div class="price">
                  <span style="color: #ff4e00;">￥399</span> X1
                </div>
              </li>
              <li>
                <div class="img">
                  <router-link to="#">
                    <img :src="require('@/assets/images/car2.jpg')" width="58" height="58" />
                  </router-link>
                </div>
                <div class="name">
                  <router-link to="#">香奈儿（Chanel）邂逅活力淡香水50ml</router-link>
                </div>
                <div class="price">
                  <span style="color: #ff4e00;">￥399</span> X1
                </div>
              </li>
              <li>
                <div class="img">
                  <router-link to="#">
                    <img :src="require('@/assets/images/car2.jpg')" width="58" height="58" />
                  </router-link>
                </div>
                <div class="name">
                  <router-link to="#">香奈儿（Chanel）邂逅活力淡香水50ml</router-link>
                </div>
                <div class="price">
                  <span style="color: #ff4e00;">￥399</span> X1
                </div>
              </li>
            </ul>
            <div class="price_sum">共计&nbsp; <span style="color: #ff4e00;">￥</span><span>{{ totalPrice }}</span></div>
            <div class="price_a">
              <router-link to="/cart">去购物车结算</router-link>
            </div>
          </div>
          <!--End 购物车已登录 End-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MemberSearch',
  props: {
    isLoggedIn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchKeyword: '',
      showCart: false,
      hotKeywords: ['咖啡', 'iphone 6S', '新鲜美食', '蛋糕', '日用品', '连衣裙'],
      cartItems: [
        {
          id: 1,
          name: '法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只',
          price: 399,
          quantity: 1,
          image: 'car1.jpg'
        },
        {
          id: 2,
          name: '香奈儿（Chanel）邂逅活力淡香水50ml',
          price: 399,
          quantity: 1,
          image: 'car2.jpg'
        },
        {
          id: 3,
          name: '香奈儿（Chanel）邂逅活力淡香水50ml',
          price: 399,
          quantity: 1,
          image: 'car2.jpg'
        }
      ]
    }
  },
  computed: {
    cartCount() {
      return this.cartItems.reduce((total, item) => total + item.quantity, 0)
    },
    totalPrice() {
      return this.cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0)
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim()) {
        this.$router.push({
          name: 'SearchResults',
          query: { keyword: this.searchKeyword }
        })
      }
    },
    searchFor(keyword) {
      this.searchKeyword = keyword
      this.handleSearch()
    },
    toggleCart() {
      this.showCart = !this.showCart
    }
  }
}
</script>

<style scoped>

</style>